<template>
  <modal title="商家信息" ref="modal" type="info">
    <div id="inner-container" class="map-inner" />
  </modal>
</template>

<script>
import { apiGetMerchantList } from '@/api/api'
export default {
  name: "MapInner",
  props: {
    center: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      markerClusterer: null,
      markers: [],
      pointsList: [
      ]
    }
  },
  mounted () {
    this.showMap()
  },
  methods: {
    showMap () {
      this.$refs.modal.info();
      //this.carGPSIP()
      this.$nextTick(() => {
        if (this) {
          this.map = new AMap.Map('inner-container', {
            doubleClickZoom: false,
            animateEnable: true,
            resizeEnable: true, // 窗口大小调整
            // center: [118.87263, 28.941708],
            zoom: 12,
            zooms: [5, 20],
            center: this.center,
            viewMode: '2D', // 设置地图模式
            // 地图模式
            lang: 'zh_cn' // 设置地图语言类型
          })

          //添加工具栏
          this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
            const toolbar = new AMap.ToolBar()// 工具条
            const scale = new AMap.Scale() // 比例尺
            this.map.addControl(toolbar)
            this.map.addControl(scale)
          })
          this.getPosition()

          this.map.setFitView();
        }
      })

    },
    getPosition () {
      apiGetMerchantList().then((res) => {
        if (res.code == 1) {
          this.pointsList = res.data.data
          this.initMarkers()
          //this.carGPSIP()
        }
      })
    },

    carGPSIP () {
      let lnglats = [
        [113.922282, 35.332887],
        [113.963101, 35.318516],
        [113.960801, 35.306263],
        [113.926809, 35.301255]
      ]

      // this.map.setCenter(lnglats[0])
      var map = new AMap.Map("inner-container", { center: lnglats[0], resizeEnable: true });//初始化地图
      //信息窗口实例
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
      //遍历生成多个标记点
      for (var i = 0, marker; i < lnglats.length; i++) {
        var marker = new AMap.Marker({
          position: lnglats[i],//不同标记点的经纬度
          map: map
        });
        marker.content = '我是第' + (i + 1) + '个Marker';
        marker.on('click', markerClick);
        marker.emit('click', { target: marker });//默认初始化不出现信息窗体,打开初始化就出现信息窗体
      }
      function markerClick (e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();
    },
    initMarkers () {
      var _this = this;

      this.markers = [];

      //信息窗口实例
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });

      this.pointsList.forEach(item => {
        // 添加maker
        if (item.location != "0") {
          let position = item.location.split(",");
          let marker = new AMap.Marker({
            position: position,
            autoRotation: true, // 自动旋转
            offset: new AMap.Pixel(-15, -15),
            clickable: true,
            extData: item
          })
          marker.on('click', markerCClick)

          function markerCClick (e) {
            let data = e.target.getExtData()
            //构建信息窗体中显示的内容
            var info = [];
            info.push("<div style=\"padding:0px;\"><h4>东曼环境</h4>");
            info.push(`<p class='input-item'>${data.merchant_name}</p>`);
            info.push(`<p class='input-item'>地址 :${data.address}</p></div></div>`);

            infoWindow.setContent(info.join(""));
            infoWindow.open(_this.map, e.target.getPosition());
          }
          this.markers.push(marker);
        }
      })
      if (this.markers.length > 0) {
        this.map.plugin(["AMap.MarkerClusterer"], function () {
          _this.markerClusterer = new AMap.MarkerClusterer(
            _this.map,
            _this.markers,
            {
              gridSize: 80,
            }
          )
        });

        //this.map.setFitView()
      }

    },
    // 自定义非聚合点样式
    renderMarker (context) {
      console.log('content', context)

      let count = this.markers.length;

      var factor = Math.pow(context.count / count, 1 / 18)
      var div = document.createElement('div')
      var Hue = 180 - factor * 180
      var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'
      var fontColor = 'hsla(' + Hue + ',100%,90%,1)'
      var borderColor = 'hsla(' + Hue + ',100%,40%,1)'
      var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'
      div.style.backgroundColor = bgColor
      var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
      div.style.width = div.style.height = size + 'px'
      div.style.border = 'solid 1px ' + borderColor
      div.style.borderRadius = size / 2 + 'px'
      div.style.boxShadow = '0 0 5px ' + shadowColor
      div.innerHTML = context.count
      div.style.lineHeight = size + 'px'
      div.style.color = fontColor
      div.style.fontSize = '14px'
      div.style.textAlign = 'center'
      context.marker.on('click', function (e) {
        console.log('onclick', e)
        const value = e.target.getExtData()
      })
      context.marker.on('mouseover', function (e) {
      })
      context.marker.on('mouseout', function (e) {
        // setTimeout(() => {
        //   infoWindow && infoWindow.close()
        // }, 100)
      })
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
      context.marker.setContent(div)
    },
  }
}
</script>

<style lang="scss" scoped>
.map-inner {
  width: 100%;
  height: 500px;
}
</style>